<template>
  <div v-if="isEdit">
    <n-grid cols="2" x-gap="12">
      <n-gi :span="12" v-if="itemValue">
        <n-popover trigger="hover">
          <template #trigger>
            {{ refValue }}
          </template>
          <span>{{ refValue }}</span>
        </n-popover>
      </n-gi>
      <n-gi :span="12" v-else>
        &nbsp;
      </n-gi>
      <n-gi :span="6">
        <n-button @click="handlerCopy" v-if="itemValue">复制</n-button>
        <n-button @click="handlerEdit" type="info" style="margin-left: 20px">
          编辑
        </n-button>
      </n-gi>
    </n-grid>
    <basicModal @register="modalRegister" ref="modalRef" class="basicModal" @on-ok="okModal">
      <template #default>
        <BasicForm @register="editRegister" class="basicForm">
        </BasicForm>
      </template>
    </basicModal>
  </div>
  <div v-else>
    <n-select v-model:value="refValue" :options="options" @update:value="changeStatus"></n-select>
  </div>

</template>

<script lang="ts">
  import {defineComponent, onMounted, unref, ref, CSSProperties} from 'vue';
  import {useDialog, useMessage} from 'naive-ui';
  import {useModal} from "@/components/Modal";
  import {FormSchema} from "@/components/Form";
  import {BasicForm, useForm} from '@/components/Form/index';
  import {DeleteOutlined, EditOutlined, PlusOutlined, QuestionCircleOutlined} from '@vicons/antd';
  import {copyToClipboard} from "@/utils/copyUtils";


  export default defineComponent({
    props: {
      itemType: {
        type: String,
        default: ""
      },
      itemValue: {
        type: String,
        default: ''
      },
      onUpdate: {
        type: Function,
        default: null
      },
      itemKey: {
        type: Object,
      },
      isEdit: {
        type: Boolean,
        default: false
      }

    },
    emits: ["on-upload"],


    setup(props) {
      const refValue = ref("");
      const dialog = useDialog();
      const message = useMessage();

      const options = [
        {
          value: 'Accessing',
          label: "接入中",
          style: "width:100%"
        },
        {
          value: 'Online',
          label: "上线",
          style: "width:100%"
        },
        {
          value: 'Offine',
          label: "下线",
          style: "width:100%"
        }
      ];

      const editCloumns: FormSchema[] = [
        {
          field: 'itemName',
          component: 'NInput',
          label: '游戏名称',
          labelMessage: '提示',
          giProps: {
            span: 1,
          },
          componentProps: {
            placeholder: '游戏名称',
            disabled: true
          },
        },

        {
          field: 'itemValue',
          component: 'NInput',
          label: unref(props).itemType,
          labelMessage: '提示',
          giProps: {
            span: 1,
          },
          componentProps: {
            type: "textarea",
            placeholder: '数据',
          },
        },
      ];

      const [modalRegister, {openModal, closeModal, setSubLoading, setProps}] = useModal({
        title: '编辑',
        width: 600
      });

      const [editRegister, {submit: editSubmit, setFieldsValue: editSetFieldsValue}] = useForm({
        gridProps: {cols: 1},
        collapsedRows: 3,
        labelWidth: 120,
        layout: 'horizontal',
        submitButtonText: '提交保存',
        showActionButtonGroup: false,
        schemas: editCloumns
      });

      //处理Copy
      async function handlerCopy() {
        await copyToClipboard(unref(refValue));
        message.success("复制成功")
      }

      //改变状态
      function changeStatus(value) {
        dialog.info({
          title: '提示',
          content: `是否改变接入状态？`,
          positiveText: '确定',
          negativeText: '取消',
          onPositiveClick: () => {
            unref(props).onUpdate(value, unref(props).itemKey)
          },
          onNegativeClick: () => {
            refValue.value = unref(props).itemValue
          },
        });
      }

      //处理编辑
      async function handlerEdit() {
        await openModal();
        editSetFieldsValue({itemValue: refValue, itemName: unref(props).itemKey.gameName})
      }

      //提交
      async function okModal() {
        try {
          let forValue = await editSubmit();
          unref(props).onUpdate(forValue, unref(props).itemKey, closeModal)
        } catch (e) {
          console.log(e);
        } finally {
          setSubLoading(false)
        }
      }

      onMounted(async () => {
        refValue.value = unref(props).itemValue
      });


      return {
        refValue,
        handlerCopy,
        editRegister,
        handlerEdit,
        modalRegister,
        okModal,
        options,
        changeStatus,
      }
    },
  });
</script>

<style lang="less" scoped></style>
